<template>
	<view>
		<view class="me-header">
			<view style="margin-right: 20rpx;">
				<image class="me-header-img" :src="avatar?avatar:require('@/static/tx1.jpg')" mode=""></image>
			</view>
			<view class="">
				<view class="nickname">{{nickname}}</view>
			</view>
			<view class="header-edit" @tap="toUserSetting">
				<text>编辑资料</text>
				<u-icon name="arrow-right" color="#fff" :bold="true"></u-icon>  
			</view>
		</view>
		<view class="me-cell">
			<view class="cell-item" @tap="toScanlog">
				<view class="cell-item-left">
					<image style="width: 58rpx;height: 58rpx;margin-right: 10rpx;" slot="icon" src="../../static/saomarizhi.png" mode=""></image>
					<text style="color: #333;">扫码日志</text>
				</view>
				<view class="cell-item-right">
					<u-icon name="arrow-right" color="#2f2f2f" :bold="true"></u-icon>         
				</view>
			</view>
			<view class="cell-item" @tap="toAboutMePage">
				<view class="cell-item-left">
					<image style="width: 58rpx;height: 58rpx;margin-right: 10rpx;" slot="icon" src="../../static/aboutme.png" mode=""></image>
					<text style="color: #333;">关于我们</text>
				</view>
				<view class="cell-item-right">
					<u-icon name="arrow-right" color="#2f2f2f" :bold="true"></u-icon>         
				</view>
			</view>
		</view>
		
		<view class="bot">
			<u-button color="#c0c2ce"  text="退出" @tap="toLogin"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				mobile:'',
				nickname:'',
				avatar:''
			}
		},
		onShow(){
			this.init()
		},
		methods: {
			async init(){
			 	const {data,code} = await this.request('user/index', {}, 'POST')
			 	this.mobile = data.user.mobile
				this.nickname = data.user.nickname
				this.avatar = data.user.avatar
			},
			toUserSetting(){
				uni.navigateTo({
					url:'/pages/userSetting/userSetting'
				})
			},
			toAboutMePage(){
				uni.navigateTo({
					url:'/pages/aboutMe/aboutMe'
				})
			},
			toScanlog(){
				uni.navigateTo({
					url:'/pages/scanlog/scanlog'
				})
			},
			toLogin(){
				uni.removeStorageSync('username')
				uni.removeStorageSync('usertoken')
				uni.reLaunch({
					url:'/pages/accountLogin/accountLogin'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.me-header{
	height: 240rpx;
	width: 750rpx;
	background: #2e8bf0;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	position: relative;
}
.header-edit{
	width: 220rpx;
	height: 60rpx;
	background: rgba(0,0,0,.3);
	border-top-left-radius: 30rpx;
	border-bottom-left-radius: 30rpx;
	display: flex;
	justify-content: center;
	line-height: 60rpx;
	position: absolute;
	top: 90rpx;
	right: 0;
	text{
		color: #fff;
		font-size: 28rpx;
		vertical-align: top;
	}
	
}
.me-header-img{
	width: 150rpx;
	height: 150rpx;
	border-radius: 75rpx;
}
.nickname{
	color: #fff;
}
.mobile{
	color: #fff;
	font-size: 28rpx;
}
.cell-item{
	background: #fff;
	width: 750rpx;
	height: 100rpx;
	box-sizing: border-box;
	padding: 0 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx; 
}
.cell-item-left{
	display: flex;
	align-items: center;
}
.bot{
	width: 700rpx;
	margin: 0 auto;
}
</style>
